import { UploadOutlined } from "@ant-design/icons";
import { useState } from "react";
import { getActOne, editAct } from "./../../../api/activity";
import Editor from "./../../../components/Editor";
import {
  Form,
  Button,
  Upload,
  Input,
  Image,
  Switch,
  Select,
  DatePicker,
  TimePicker,
} from "antd";
const { Option } = Select;

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};

const EditActivity = (props) => {
  const [form] = Form.useForm();
  const activityid = props.history.location.search.split("=")[1];
  const [activityOne,setActivityOne] = useState();
  useState(() => { 
      getActOne({ activityid:activityid }).then((res) => {
        //   console.log(res.data.data)
          setActivityOne(res.data.data);
          form.setFieldsValue({
                title: res.data.data[0].title,
                status: res.data.data[0].status,
                isshow: res.data.data[0].isshow,
          });
          if (res.data.data[0].listimg !== "") {
                setUrl(res.data.data[0].listimg);
          }
      })
  })
  const [url, setUrl] = useState("");
  const [outerhtml, setOuterhtml] = useState("");

  const normFile = (e) => {
    if (e.fileList[0]) {
      console.log(e);
      console.log("上传", e.file);
      const reader = new FileReader();
      reader.onloadend = (e) => {
        setUrl(e.target.result);
      };
      reader.readAsDataURL(e.file); //把图片转换成base64位格式
      return e && e.fileList;
    }
  };
  const onFinish = (values) => {
    values.listimg = values.listimg[0].thumbUrl;
    values.startTime = values.startTime._d.getTime();
    values.endTime = values.endTime._d.getTime();
    values.introduce = outerhtml;
    values.activityid = activityid
    console.log(values);
    editAct(values).then((res) => {
      console.log(res);
        props.history.go(-1);
    });
  };
  const handleChange = (value) => {
    console.log(value);
  };
  //阻止图片的默认上传
  const beforeUpload = (picture) => {
    // setUrl(e.fileList[0].thumbUrl);
    return false;
  };
  //富文本编辑器中的方法
  const handlerGetHtml = (outerhtml) => {
    setOuterhtml(outerhtml);
  };

  return (
    <Form form={form} name="validate_other" {...formItemLayout} onFinish={onFinish}>
      <Form.Item
        {...formItemLayout}
        name="title"
        label="活动标题"
        rules={[
          {
            required: true,
            message: "请输入活动标题",
          },
        ]}
      >
        <Input placeholder="请输入活动标题" />
      </Form.Item>
      <Form.Item
        name="listimg"
        label="列表图"
        valuePropName="fileList"
        getValueFromEvent={normFile}
        rules={[
          {
            required: true,
            message: "请选择列表图片",
          },
        ]}
      >
        <Upload name="logo" listType="picture" beforeUpload={beforeUpload}>
          <Button icon={<UploadOutlined />}>Click to upload</Button>
        </Upload>
      </Form.Item>
      <Form.Item
        wrapperCol={{
          span: 12,
          offset: 6,
        }}
      >
        <Image src={url} />
      </Form.Item>
      <Form.Item
        {...formItemLayout}
        name="status"
        label="状态"
        rules={[
          {
            required: true,
            message: "请输入状态",
          },
        ]}
      >
        <Select
          defaultValue="请选择..."
          style={{ width: 120 }}
          onChange={handleChange}
        >
          <Option value="全部">全部</Option>
          <Option value="进行中">进行中</Option>
          <Option value="未开始">未开始</Option>
          <Option value="已结束">已结束</Option>
        </Select>
      </Form.Item>
      <Form.Item
        name="isshow"
        label="上架"
        valuePropName="checked"
        rules={[
          {
            required: true,
            message: "请输入上架情况",
          },
        ]}
      >
        <Switch />
      </Form.Item>
      <Form.Item {...formItemLayout} label="活动介绍">
        <Editor getHtml={handlerGetHtml} />
        渲染富文本编辑器
        <div dangerouslySetInnerHTML={{ __html: outerhtml }}></div>
      </Form.Item>
      <Form.Item
        label="inline"
        style={{
          marginBottom: 0,
        }}
      >
        <Form.Item
          validateStatus="error"
          name="startTime"
          help="Please select the correct date"
          style={{
            display: "inline-block",
            width: "calc(30% - 12px)",
          }}
        >
          <DatePicker />
        </Form.Item>
        <Form.Item
          name="endTime"
          style={{
            display: "inline-block",
            width: "calc(20% - 12px)",
          }}
        >
          <DatePicker />
        </Form.Item>
      </Form.Item>

      <Form.Item
        wrapperCol={{
          span: 12,
          offset: 6,
        }}
      >
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};
export default EditActivity;
